<template>
  <div class="level">
    <span
      v-if="level==1"
      class="level1"
    >普通</span>
    <span
      v-if="level==2"
      class="level2"
    >素养</span>
    <span
      v-if="level==3"
      class="level3"
    >S</span>
    <span
      v-if="level==4"
      class="level4"
    >A</span>
    <span
      v-if="level==5"
      class="level5"
    >B</span>
    <span
      v-if="level==6"
      class="level6"
    >启航</span>
    <span
      v-if="level==7"
      class="level7"
    >研习</span>
    <span
      v-if="level==8"
      class="level8"
    >Tips</span>
  </div>
</template>
<script>
export default {
  props: ['level'],
  data() {
    return {}
  }
}
</script>
<style lang="less" scoped>
.level {
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;
  span {
    padding: 5px 10px;
    display: block;
    color: #fff;
    font-size: 28px;
    &.level1 {
      background: linear-gradient(
        90deg,
        rgba(62, 195, 116, 1),
        rgba(97, 220, 163, 1)
      );

      border-radius: 5px;
    }
    &.level2 {
      background-image: linear-gradient(
          90deg,
          #fe813d 0%,
          #ff8d50 60%,
          #ff9962 100%
        ),
        linear-gradient(#fe813d, #fe813d);
      border-radius: 5px;
    }
    &.level3 {
      background-image: linear-gradient(
          90deg,
          #d478ef 0%,
          #da87f7 60%,
          #df96fe 100%
        ),
        linear-gradient(#fe813d, #fe813d);
      border-radius: 5px;
    }
    &.level4 {
      background-image: linear-gradient(
          -90deg,
          #67cefe 0%,
          #4bbefe 40%,
          #2eadfe 100%
        ),
        linear-gradient(#519aff, #519aff);
      border-radius: 5px;
    }
    &.level5 {
      background-image: linear-gradient(
          90deg,
          #ff952d 5%,
          #ffa243 62%,
          #ffae58 100%
        ),
        linear-gradient(#fd7171, #fd7171);
      border-radius: 5px;
    }
    &.level6 {
      background-image: linear-gradient(
          90deg,
          #4a95fe 0%,
          #62a3fe 60%,
          #79b1fe 100%
        ),
        linear-gradient(#569dff, #569dff);
      border-radius: 5px;
    }
    &.level7 {
      background-image: linear-gradient(
          90deg,
          #fe5a5b 0%,
          #ff6d61 60%,
          #ff7f66 100%
        ),
        linear-gradient(#8a9dff, #8a9dff);
      border-radius: 5px;
    }
    &.level8 {
      background-image: linear-gradient(90deg, #855fe0 0%, #aa8cfa 100%),
        linear-gradient(#fd7171, #fd7171);
      border-radius: 5px;
    }
  }
}
</style>
